<template>
  <div class="register">
    <Header title="会员申请" />
    <form action="#" class="formBox">
      <p>
        <i>*</i>
        <span>真实姓名</span>
        <input type="text" name="uesrname" placeholder="请填写真实姓名" />
      </p>
      <p>
        <i>*</i>
        <span>证件类型</span>
        <select name="">
          <!--下拉列表框-->
          <option value="daxue">请选择</option>
          <option value="high">高中</option>
          <option value="middle">中学</option>
        </select>
      </p>
      <p>
        <i>*</i>
        <span>证件号码</span>
        <input type="text" name="uesrname" placeholder="请填写证件号" />
      </p>
      <p>
        <i>*</i>
        <span>性别：</span>
        <label
          ><input
            type="radio"
            class="radio"
            name="sex"
            value="男生"
          />男生</label
        >
        <label
          ><input
            type="radio"
            class="radio"
            name="sex"
            value="女生"
          />女生</label
        >
      </p>
      <p>
        <i>*</i>
        <span>出生日期:</span>
        <input type="text" placeholder="请选择出生日期" :value="date">
        <img
          class="calendar"
          @click="show = true"
          src="../assets/日历.png"
          alt=""
        />
      </p>
      <p>
        <i>*</i>
        <span>民族:</span>
        <select name="">
          <!--下拉列表框-->
          <option value="daxue">请选择</option>
          <option value="high">满</option>
          <option value="middle">回族</option>
          <option value="middle">回族</option>
        </select>
      </p>
      <div class="workPlace">
        <div style="height: 30px; line-height: 30px">
          <i>*</i>工作所在地（省市区）
        </div>

        <div class="selectBox">
          <select name="" class="selectItmem">
            <!--下拉列表框-->
            <option value="daxue">请选择省份</option>
            <option value="high">高中</option>
            <option value="middle">中学</option>
          </select>

          <select name="" class="selectItmem">
            <!--下拉列表框-->
            <option value="daxue">请选择城市</option>
            <option value="high">高中</option>
            <option value="middle">中学</option>
          </select>

          <select name="" class="selectItmem">
            <!--下拉列表框-->
            <option value="daxue">选择区/县</option>
            <option value="high">高中</option>
            <option value="middle">中学</option>
          </select>
        </div>
        <p>
          <i>*</i>
          <span>加入学会</span>
          <select name="">
            <!--下拉列表框-->
            <option value="daxue">请选择归属学会</option>
            <option value="high">满</option>
            <option value="middle">回族</option>
          </select>
        </p>
        <p>
          <i>*</i>
          <span>学会类型</span>
          <select name="">
            <!--下拉列表框-->
            <option value="daxue">普通会员</option>
            <option value="high">满</option>
            <option value="middle">回族</option>
          </select>
        </p>
        <p>
          <i>*</i>
          <span>加入学会中心</span>
          <select name="">
            <!--下拉列表框-->
            <option value="daxue">请选择会员中心</option>
            <option value="high">满</option>
            <option value="middle">回族</option>
          </select>
        </p>
      </div>
    </form>
    <div class="saveSmend">
      <button @click="nextStep">下一步</button>
    </div>

    <van-calendar
      v-model="show"
      :min-date="minDate"
      :max-date="maxDate"
      @confirm="onConfirm"
    />
  </div>
</template>

<script>
import Header from "../components/header";
export default {
  name: "register",

  components: {
    Header,
  },
  data() {
    return {
      show: false,
      minDate: new Date(1960, 0, 1),
      maxDate: new Date(2021, 0, 31),
      date: "",
    };
  },
  methods: {
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    onConfirm(date) {
      this.show = false;
      this.date = this.formatDate(date);
    },
    nextStep() {
      this.$router.push("/workAmend")
    }
  },
};
</script>

<style lang="less">
.register {
  .formBox {
    font-size: 15px;
    p {
      border-bottom: 1px solid #ccc;
      display: flex;
      height: 40px;
      align-items: center;
      padding-right: 10px;
      span {
        flex: 1;
      }
      select {
        height: 20px;
      }
      input {
        text-align: right;
      }
      i {
        color: red;
        margin: auto 10px;
      }
      .radio {
        width: 10px;
        height: 10px;
      }
    }
    .workPlace {
      padding: auto 5px;
      i {
        color: red;
        margin: auto 10px;
      }
      .selectBox {
        display: flex;
        height: 40px;
        align-items: center;
      }
      .selectItmem {
        margin-right: 10px;
        height: 25px;
        flex: 1;
      }
    }
    .calendar {
      width: 25px;
      height: 25px;
    }
  }
  .saveSmend {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    button {
      width: 200px;
      height: 40px;
      background: #169bd5;
      color: #fff;
      border-radius: 4px;
    }
  }
}
</style>